<template>
    <div class="reportmian">
        <el-collapse v-model="activeNames">
            <el-collapse-item title="数据筛选" name="1">
                <el-form :inline="true" class="divstyle" :model="selectfrom">
                    <el-form-item label="财务类型">
                        <el-select filterable  placeholder="请选择财务类型" v-model="selectfrom.FinanceType">
                            <el-option :value="0" label="全部"></el-option>
                            <el-option :value="1" label="借款"></el-option>
                            <el-option :value="4" label="报销"></el-option>
                            <el-option :value="16" label="收款"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="部门">
                        <el-select  filterable placeholder="请选择部门" v-model="selectfrom.Department">
                            <el-option :value="0" label="请选择部门"></el-option>
                            <el-option :value="0" label="全部"></el-option>
                            <el-option v-for="v in AllDepartment" :label="v.DepartmentName" :value="v.Id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="项目">
                        <el-select filterable  placeholder="请选择项目" v-model="selectfrom.Project">
                            <el-option :value="0" label="全部"></el-option>
                            <el-option v-for="v in AllProject" :label="v.ProjectName" :value="v.Id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="员工">
                        <el-select filterable  placeholder="请选择员工" v-model="selectfrom.UserId">
                            <el-option :value="0" label="请选择员工"></el-option>
                            <el-option v-for="v in $store.state.AllUsers" :label="v.UserName" :value="v.Id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="客户">
                        <el-select  filterable placeholder="请选择客户" v-model="selectfrom.CustomerId">
                            <el-option :value="0" label="请选择客户"></el-option>
                            <el-option v-for="v in AllCustomer" :label="v.CustomerCompany" :value="v.Id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="银行卡">
                        <el-select  filterable placeholder="请选择银行卡" v-model="selectfrom.FinanceBankCardId">
                            <el-option :value="-1" label="请选择银行卡"></el-option>
                            <el-option v-for="v in AllFinanceBankCard" :label="v.CardName" :value="v.Id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker
                                v-model="selectfrom.Start"
                                type="date"
                                placeholder="开始时间"
                                format="yyyy - MM - dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker
                                v-model="selectfrom.End"
                                type="date"
                                placeholder="结束时间"
                                format="yyyy - MM - dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" icon="el-icon-search" @click="formdata"></el-button>
                        <el-button type="success" icon="el-icon-printer" v-print="printObj">打印</el-button>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <el-collapse-item title="数据面板" name="2">
                <el-row>
                    <el-col align="center" style="font-size: 25px;font-weight: bold;">
                        固远晨通科技发展有限公司财务流水表
                    </el-col>
                    <el-col>
                        <el-table id="wrapperFinanceFlowWaterReport" :data="tableData"  border  show-summary >
                            <el-table-column label="序号" align="center" show-overflow-tooltip type="index" width="50"></el-table-column>
                            <el-table-column label="编号" align="center" show-overflow-tooltip>
                                <template slot-scope="slot">
                                    {{ slot.row.Number }}
                                </template>
                            </el-table-column>
                            <el-table-column label="请款人" align="center" show-overflow-tooltip>
                                <template slot-scope="slot">
                                    {{ GetUserName(slot.row.Borrower)  }}
                                </template>
                            </el-table-column>
                            <el-table-column label="银行卡" align="center" show-overflow-tooltip>
                                <template slot-scope="slot">
                                    {{ GetFinanceBankCardName(slot.row.FinanceBankId) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="部门" align="center" show-overflow-tooltip >
                                <template slot-scope="slot">
                                    {{ GetDepartmentName(slot.row.Department) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="项目" align="center" width="380">
                                <template slot-scope="slot">
                                    {{ GetProjectName(slot.row.Project) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="支付对象" align="center" show-overflow-tooltip >
                                <template slot-scope="slot">
                                    {{ GetPayeeName(slot.row) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="日期" align="center">
                                <template slot-scope="slot">
                                    {{ fmtDateNew(slot.row.AuditTime) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="类别" align="center" show-overflow-tooltip >
                                <template slot-scope="slot">
                                    <label v-if="slot.row.FinanceType==1">个人借款</label>
                                    <label v-if="slot.row.FinanceType==2">支付申请</label>
                                    <label v-if="slot.row.FinanceType==4">常规报销</label>
                                    <label v-if="slot.row.FinanceType==8">差旅报销</label>
                                    <label v-if="slot.row.FinanceType==16">收款</label>
                                </template>
                            </el-table-column>
                            <el-table-column label="流水（元）" prop="FlowWater" align="center" show-overflow-tooltip>
                                <template slot-scope="slot">
                                    {{ slot.row.FlowWater   }}
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </el-collapse-item>
            <el-collapse-item title="项目报表" name="3">
                <div id="EchartData">
                    <div class="pieData" id="leftData" ></div>
                    <div class="bar" id="downData"></div>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
    import * as publicjs from "../../../../public/Scriput/Public";
    import Echatrs from "echarts";

    export default {
        name: "FinanceFlowWaterReport",
        props: {
            AllProject: {
                type: Array,
                required: true
            },
            AllDepartment: {
                type: Array,
                required: true
            },
            AllCustomer: {
                type: Array,
                required: true
            },
            AllFinanceBankCard: {
                type: Array,
                required: true
            },
        },
        data() {
            return {
                activeNames: ['1', '2', '3'],
                selectfrom: {
                    FinanceType: 0,
                    Department: 0,
                    Project: 0,
                    UserId: 0,
                    CustomerId: 0,
                    FinanceBankCardId: -1,
                    Start: '',
                    End: '',
                },
                tableData: [],
                wrapper: {
                    width: "100%",
                    height: "100%",
                    margin: "auto",
                },
                printObj: {
                    id: "wrapperFinanceFlowWaterReport",  //打印标签的id
                    popTitle: '固远晨通科技发展有限公司财务成本表',  //文件标题
                    extraCss: 'http://www.guyuanct.com/',
                    extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
                },
            }
        },
        created() {
            this.InitDate();
            publicjs.setecharts(Echatrs)
            this.formdata()
        },
        methods: {
            InitDate() {
                const endDate = this.getFormatDate(new Date()).substr(0, 11)
                const beginDate = this.getFormatDate(new Date(new Date() - 3600 * 1000 * 24 * 30)).substr(0, 11)
                this.selectfrom.Start = beginDate;
                this.selectfrom.End = endDate;
            },
            // 获取当前时间
            getFormatDate(date) {
                var month = date.getMonth() + 1
                var strDate = date.getDate()
                if (month >= 1 && month <= 9) {
                    month = '0' + month
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = '0' + strDate
                }
                var currentDate = date.getFullYear() + '-' + month + '-' + strDate + '';
                return currentDate
            },
            // 初始数据加载
            formdata() {
                let loadding = this.openLoading();
                this.$http.post('Report/GetFinanceFlowWaterReportData', {
                    from: this.selectfrom
                }).then(res => {
                    loadding.close();
                    this.tableData = res.data
                    this.InitEchart(this.tableData)
                })
            },
            //获取对应部门名字
            GetDepartmentName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.AllDepartment.length; i++) {
                        if (this.AllDepartment[i].Id == value) {
                            name = this.AllDepartment[i].DepartmentName
                            return name
                        }
                    }
                }
            },
            //获取对应项目名字
            GetProjectName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.AllProject.length; i++) {
                        if (this.AllProject[i].Id == value) {
                            name = this.AllProject[i].ProjectName
                            return name
                        }
                    }
                }
            },
            //时间转化
            fmtDateNew(val) {
                if (val != '' && val != null) {
                    let newtime = val.split(' ')[0]
                    return newtime
                } else {
                    return ''
                }
            },
            //获取人员名称
            GetUserName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.$store.state.AllUsers.length; i++) {
                        if (this.$store.state.AllUsers[i].Id == value) {
                            name = this.$store.state.AllUsers[i].UserName
                            return name
                        }
                    }
                }
            },
            //获取对应部门名字
            GetFinanceBankCardName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.AllFinanceBankCard.length; i++) {
                        if (this.AllFinanceBankCard[i].Id == value) {
                            name = this.AllFinanceBankCard[i].CardName
                            return name
                        }
                    }
                }
            },
            //支付对象
            GetPayeeName(obj) {
                let name = ''
                if (obj.PayeeType == '1') {
                    for (let i = 0; i < this.AllCustomer.length; i++) {
                        if (this.AllCustomer[i].Id == obj.Payee) {
                            name = this.AllCustomer[i].CustomerName
                            return name
                        }
                    }
                } else if (obj.PayeeType == '2') {
                    for (let i = 0; i < this.$store.state.AllUsers.length; i++) {
                        if (this.$store.state.AllUsers[i].Id == obj.Payee) {
                            name = this.$store.state.AllUsers[i].UserName
                            return name
                        }
                    }
                }
            },
            //echarts加载
            InitEchart(data) {
                let _this = this;
                data.sort(function (a, b) {//按照时间升序排序
                    if (_this.fmtDateNew(a.Date) > _this.fmtDateNew(b.Date)) return 1;
                    if (_this.fmtDateNew(a.Date) < _this.fmtDateNew(b.Date)) return -1;
                    return 0;
                });
                data.forEach((d, i) => {
                    d.Date = this.fmtDateNew(d.Date);//为按时间统计做准备
                    if (d.FinanceType == 1) {
                        d.FinanceType = "个人借款";
                        d.Money = d.ApprovalMoney;
                    }
                    else if (d.FinanceType == 2) {
                        d.FinanceType = "支付申请";
                        d.Money = d.ApprovalMoney;
                    }
                    else if (d.FinanceType == 4) {
                        d.FinanceType = "常规报销";
                        d.Money = d.ApprovalMoney;
                    }
                    else if (d.FinanceType == 8) {
                        d.FinanceType = "差旅报销";
                        d.Money = d.ApprovalMoney;
                    }
                    else if (d.FinanceType == 16) {
                        d.FinanceType = "收款";
                        d.Money = d.CollectMoney;
                    }
                })
                var noRepeatDepartData = publicjs.DataGroupBy(JSON.stringify(data), "FinanceType", "Money");
                var new_Name = noRepeatDepartData.map(obj => { return obj.FinanceType; });
                var new_Data = noRepeatDepartData.map(obj => { return { name: obj.FinanceType, value: obj.Money }; });
                publicjs.InitEchartPie("leftData", "收入、借款、报销占比", "单位：人民币（元）", new_Name, "收入、借款、报销占比", new_Data);
                //构造每日的进账出账柱状图
                var noRepeatDateData = publicjs.DataGroupBy(JSON.stringify(data), "Date");
                var new_Date = noRepeatDateData.map(obj => { return obj.Date; });
                var InData = JSON.stringify(data.filter(x => x.FlowWater > 0));
                var OutData = JSON.stringify(data.filter(x => x.FlowWater < 0));
                var noRepeatInData = publicjs.DataGroupBy(InData, "Date", "FlowWater");
                var noRepeatOutData = publicjs.DataGroupBy(OutData, "Date", "FlowWater");
                var title = ['出账', '进账'], valueList = [], gapList = [];
                new_Date.forEach((d, i) => {
                    var inD = noRepeatInData.filter(x => x.Date == d);
                    var outD = noRepeatOutData.filter(x => x.Date == d);
                    if (inD.length != 0)
                        gapList.push(inD[0].FlowWater);
                    else
                        gapList.push("");
                    if (outD.length != 0)
                        valueList.push(Math.abs(outD[0].FlowWater));
                    else
                        valueList.push("");
                })
                publicjs.InitEchartBar_MoreData("downData", title, new_Date, valueList, gapList);
            },

            fmtDateNew(val) {
                let newtime = val.split(' ')[0]
                return newtime
            },
        }
    }
</script>

<style scoped>
    .pieData{
        height: 500px;
    }
    .bar{
        height: 500px;
    }
</style>
